<template>
  <div>
    <div>
      <div>一级{{isShow2}}</div>
      <div v-if="isShow2" class="titleArea">
        <div class="titleArea-title singleChoosed" @click="getSecondDataChoosed(item.deptId,item)"
          v-for="(item,index) of deptTreeListChoosed" :key="index">
          <span>{{item.deptName}}</span>
          <span>×</span>
        </div>
      </div>
      <div v-else class="titleArea">
        <div class="titleArea-title" v-for="(item,index) of deptTreeList" @click="getSecondData(item.deptId,item)"
          :key="index">
          {{item.deptName}}
        </div>
      </div>
      <div>二级{{isShow3}}</div>
      <div v-if="isShow3" class="titleArea">
        <div class="titleArea-title singleChoosed" @click="getThirdDataChoosed(item.deptId,item)"
          v-for="(item,index) of deptTreeSecondListChoosed" :key="index">
          <span>{{item.deptName}}</span>
          <span>×</span>
        </div>
      </div>
      <div v-else class="titleArea">
        <div class="titleArea-title" v-for="(item,index) of deptTreeSecondList" @click="getThirdData(item.deptId,item)"
          :key="index">
          {{item.deptName}}
        </div>
      </div>
      <div>三级{{isShow4}}</div>
      <div v-if="isShow4" class="titleArea">
        <div class="titleArea-title singleChoosed" @click="getFourDataChoosed(item.deptId,item)"
          v-for="(item,index) of deptTreeThirdListChoosed" :key="index">
          <span>{{item.deptName}}</span>
          <span>×</span>
        </div>
      </div>
      <div v-else class="titleArea">
        <div class="titleArea-title" v-for="(item,index) of deptTreeThirdList" @click="getFourData(item.deptId,item)"
          :key="index">
          {{item.deptName}}
        </div>
      </div>
      <div>四级</div>
      <div v-if="isShow5" class="titleArea">
        <div class="titleArea-title singleChoosed" @click="getFiveDataChoosed(item.deptId,item)"
          v-for="(item,index) of deptTreeFourListChoosed" :key="index">
          <span>{{item.deptName}}</span>
          <span>×</span>
        </div>
      </div>
      <div v-else class="titleArea">
        <div class="titleArea-title" v-for="(item,index) of deptTreeFourList" @click="getFiveData(item.deptId,item)"
          :key="index">
          {{item.deptName}}
        </div>
      </div>
      <div>五级</div>
      <div v-if="isShow6" class="titleArea">
        <div class="titleArea-title singleChoosed" @click="getSixDataChoosed(item.deptId,item)"
          v-for="(item,index) of deptTreeFiveListChoosed" :key="index">
          <span>{{item.deptName}}</span>
          <span>×</span>
        </div>
      </div>
      <div v-else class="titleArea">
        <div class="titleArea-title" v-for="(item,index) of deptTreeFiveList" @click="getSixData(item.deptId,item)"
          :key="index">
          {{item.deptName}}
        </div>
      </div>
      <div>六级</div>
      <div v-if="isShow7" class="titleArea">
        <div class="titleArea-title singleChoosed" @click="getSevenDataChoosed(item.deptId,item)"
          v-for="(item,index) of deptTreeSixListChoosed" :key="index">
          <span>{{item.deptName}}</span>
          <span>×</span>
        </div>
      </div>
      <div v-else class="titleArea">
        <div class="titleArea-title" v-for="(item,index) of deptTreeSixList" @click="getSevenData(item.deptId,item)"
          :key="index">
          {{item.deptName}}
        </div>
      </div>
      <div>七级</div>
      <div v-if="isShow8" class="titleArea">
        <div class="titleArea-title singleChoosed" @click="getEightDataChoosed(item.deptId,item)"
          v-for="(item,index) of deptTreeSevenListChoosed" :key="index">
          <span>{{item.deptName}}</span>
          <span>×</span>
        </div>
      </div>
      <div v-else class="titleArea">
        <div class="titleArea-title" v-for="(item,index) of deptTreeSevenList" @click="getEightData(item.deptId,item)"
          :key="index">
          {{item.deptName}}
        </div>
      </div>
    </div>
    <!--按钮 -->
    <div style="text-align: center;">
      <el-button @click="cancelArea">取 消</el-button>
      <el-button type="primary" @click="confirmArea">确 定</el-button>
    </div>
  </div>
</template>

<script>
  import {
    getDeptTreeList,
    getDeptTreeDetail
  } from "@/api/system/user";
  import areaLink from "./areaLink";

  export default {
    props: {
      deptId: {
      type: String,
      default: ''
    },
  },
    // deptId
    name: "areaLink",
    // components: { areaLink, userInfo, resetPwd },
    data() {
      return {
        // 一级
        isShow2: false,
        deptTreeList: [],
        deptTreeListChoosed: [],
        // 二级
        isShow3: false,
        deptTreeSecondList: [],
        deptTreeSecondListChoosed: [],
        // 三级
        isShow4: false,
        deptTreeThirdList: [],
        deptTreeThirdListChoosed: [],
        // 四级
        isShow5: false,
        deptTreeFourList: [],
        deptTreeFourListChoosed: [],
        // 五级
        isShow6: false,
        deptTreeFiveList: [],
        deptTreeFiveListChoosed: [],
        // 六级
        isShow7: false,
        deptTreeSixList: [],
        deptTreeSixListChoosed: [],
        // 七级
        isShow8: false,
        deptTreeSevenList: [],
        deptTreeSevenListChoosed: [],
        choosedParams:{
          value:'',
          text:''
        },
      };
    },
    created() {
      this.getDeptTreeList()
    },
    methods: {
      // 二级
      async getSecondData(deptId, item) {
        // if(item.isEdit){
        //    console.log('修改')
        // } else {
        //    console.log('新增')
        // }
        this.isShow2 = true
        this.deptTreeListChoosed = []
        this.deptTreeListChoosed.push(item)  
        let res = await getDeptTreeList({
          parentId: deptId
        })
        this.deptTreeSecondList = res.data
        this.getParams(deptId,item.deptName)
      },
      getSecondDataChoosed(deptId, item) {
        this.isShow2 = !this.isShow2
        if(item.isEdit){
          this.isShow2 = false
        }
        this.isShow3 = false
        this.isShow4 = false
        this.isShow5 = false
        this.isShow6 = false
        this.isShow7 = false
        this.isShow8 = false
        this.deptTreeSecondList = []
        this.deptTreeThirdList = []
        this.deptTreeFourList = []
        this.deptTreeFiveList = []
        this.deptTreeSixList = []
        this.deptTreeSevenList = []
      },
      // 三级
      async getThirdData(deptId, item) {
        // if(item.isEdit){
        //    console.log('修改2')
        // } else {
        //    console.log('新增2')
        // }
        this.isShow3 = true
        this.deptTreeSecondListChoosed = []
        this.deptTreeSecondListChoosed.push(item)
        let res = await getDeptTreeList({
          parentId: deptId
        })
        this.deptTreeThirdList = res.data
        this.getParams(deptId,item.deptName)
      },
      getThirdDataChoosed(deptId, item) {
        this.isShow3 = !this.isShow3
        if(item.isEdit){
          this.isShow3 = false
        }
        this.isShow4 = false
        this.isShow5 = false
        this.isShow6 = false
        this.isShow7 = false
        this.isShow8 = false
        this.deptTreeThirdList = []
        this.deptTreeFourList = []
        this.deptTreeFiveList = []
        this.deptTreeSixList = []
        this.deptTreeSevenList = []
      },
      // 四级
      async getFourData(deptId, item) {
        this.isShow4 = true
          this.deptTreeThirdListChoosed = []
        this.deptTreeThirdListChoosed.push(item)
        let res = await getDeptTreeList({
          parentId: deptId
        })
        this.deptTreeFourList = res.data
        this.getParams(deptId,item.deptName)
      },
      getFourDataChoosed(deptId, item) {
        this.isShow4 = !this.isShow4
        if(item.isEdit){
          this.isShow4 = false
        }
        this.isShow5 = false
        this.isShow6 = false
        this.isShow7 = false
        this.isShow8 = false
        this.deptTreeFourList = []
        this.deptTreeFiveList = []
        this.deptTreeSixList = []
        this.deptTreeSevenList = []
      },
      // 五级
      async getFiveData(deptId, item) {
        this.isShow5 = true
          this.deptTreeFourListChoosed = []
        this.deptTreeFourListChoosed.push(item)
        let res = await getDeptTreeList({
          parentId: deptId
        })
        this.deptTreeFiveList = res.data
        this.getParams(deptId,item.deptName)
      },
      getFiveDataChoosed(deptId, item) {
        this.isShow5 = !this.isShow5
        if(item.isEdit){
          this.isShow5 = false
        }
        this.isShow6 = false
        this.isShow7 = false
        this.isShow8 = false
        this.deptTreeFiveList = []
        this.deptTreeSixList = []
        this.deptTreeSevenList = []
      },
      // 六级
      async getSixData(deptId, item) {
        this.isShow6 = true
          this.deptTreeFiveListChoosed = []
        this.deptTreeFiveListChoosed.push(item)
        let res = await getDeptTreeList({
          parentId: deptId
        })
        this.deptTreeSixList = res.data
        this.getParams(deptId,item.deptName)
      },
      getSixDataChoosed(deptId, item) {
        this.isShow6 = !this.isShow6
        if(item.isEdit){
          this.isShow6 = false
        }
        this.isShow7 = false
        this.isShow8 = false
        this.deptTreeSixList = []
        this.deptTreeSevenList = []
      },
      // 七级
      async getSevenData(deptId, item) {
        this.isShow7 = true
          this.deptTreeSixListChoosed = []
        this.deptTreeSixListChoosed.push(item)
        let res = await getDeptTreeList({
          parentId: deptId
        })
        this.deptTreeSevenList = res.data
        this.getParams(deptId,item.deptName)
      },
      getSevenDataChoosed(deptId, item) {
        this.isShow7 = !this.isShow7
        if(item.isEdit){
          this.isShow7 = false
        }
        this.isShow8 = false
        this.deptTreeSevenList = []
      },
      // 八级
      async getEightData(deptId, item) {
        this.isShow8 = true
          this.deptTreeSevenListChoosed = []
        this.deptTreeSevenListChoosed.push(item)
        this.getParams(deptId,item.deptName)
      },
      getEightDataChoosed(deptId, item) {
        this.isShow8 = !this.isShow8
        if(item.isEdit){
          this.isShow8 = false
        }
      },

      getDeptTreeList() {
        let data = {
          parentId: '0'
        }
        getDeptTreeList(data).then(response => {
          if (response.code == '200') {
            this.deptTreeList = response.data;
            this.getDept()
          }
        });
      },
      getDept(){
        let data = {
          deptId: this.deptId
        }
        getDeptTreeDetail(data).then(response => {
          if (response.code == '200') {
            let data = response.data || []
            let ls = Object.keys(data).map((colorId) => ({
               ls: Array.isArray(data[colorId]) ? data[colorId] : [data[colorId]],
               id: +colorId,
               isArray: Array.isArray(data[colorId]),
               deptId: Array.isArray(data[colorId]) ? '' : data[colorId].deptId
            }));
            ls.map((item,index,arr)=>{

              this.$set(item.ls, 0, {
                ...item.ls[0],
                isEdit:'true'
              });

              if(item.isArray){
                // 最后一层没有选中
                if(index===0){
                  this.deptTreeList = item.ls
                } else if(index === 1){
                  this.deptTreeSecondList = item.ls
                } else if(index ===2) {
                  this.deptTreeThirdList = item.ls
                } else if(index ===3) {
                  this.deptTreeFourList = item.ls
                } else if(index ===4) {
                  this.deptTreeFiveList = item.ls
                } else if(index ===5){
                  this.deptTreeSixList = item.ls
                } else if(index ===6){
                  this.deptTreeSevenList = item.ls
                  console.log(item,index,'1')
                  console.log(333)
                } else if(index ===7){
                  console.log(444)
                }
              } else {                
                // 最后一层有选中
                if(index===0){
                  this.deptTreeListChoosed = item.ls
                  this.isShow2 = true
                  console.log(item,index,'11111')
                  // this.getSecondData(item.deptId, item.ls)
                } else if(index === 1){
                  this.deptTreeSecondListChoosed = item.ls
                  this.isShow3 = true
                  console.log(item,index,'22222')
                  // this.getThirdData(item.deptId, item.ls)
                } else if(index ===2) {
                  this.deptTreeThirdListChoosed = item.ls
                  this.isShow4 = true
                  console.log(item,index,'3')
                  // this.getFourData(item.deptId, item.ls)
                } else if(index ===3) {
                  this.deptTreeFourListChoosed = item.ls
                  this.isShow5 = true
                  console.log(item,index,'4')
                  // this.getFiveData(item.deptId, item.ls)
                } else if(index ===4) {
                  this.deptTreeFiveListChoosed = item.ls
                  this.isShow6 = true
                  console.log(item,index,'5')
                  // this.getSixData(item.deptId, item.ls)
                } else if(index ===5){
                  this.deptTreeSixListChoosed = item.ls
                  this.isShow7 = true
                  console.log(item,index,'6')
                  // this.getSevenData(item.deptId, item.ls)
                } else if(index ===6){
                  this.deptTreeSevenListChoosed = item.ls
                  this.isShow8 = true
                  console.log(item,index,'7')
                  // this.getEightData(item.deptId, item.ls)
                } else if(index ===7){
                  console.log(item,index,'false')
                }
              }
            })
          }
        });
      },

      cancelArea(){
        this.$emit('area-parent', this.choosedParams)
      },
      confirmArea(){
        this.$emit('area-parent', this.choosedParams)
      },
      getParams(deptId,deptName){
        console.log(deptId,deptName,'=============')
        this.choosedParams.value = ''
        this.choosedParams.text = ''
        this.choosedParams.value = deptId
        this.choosedParams.text = deptName
      }
    }
  };
</script>


<style>
  .titleArea {
    display: flex;
    justify-content: start;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    flex-wrap: wrap;
  }

  .titleArea-title {
    cursor: pointer;
    font-size: 14px;
    background-color: #F5F6F8;
    padding: 3px 10px;
    border-radius: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .singleChoosed {
    background-color: #EEFFF8 !important;
    border: 1px solid #17A787 !important;
    width: auto !important;
    white-space: nowrap !important;
    position: relative;
  }

  .singleChoosed>span:nth-child(2) {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 15px;
    color: #fff;
    top: -4px;
    right: -4px;
    background-color: #17A787;
    text-align: center
  }
</style>